<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例练习汇总</title>
  <style>
    table {
      border-collapse: collapse;
      margin: 50px auto;
    }
    thead tr {
      background: #eee;
    }
    td {
      width: 300px;
      border: 1px solid #666;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <thead>
     <tr>
      <td>序号</td>
      <td>案例</td>
     </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
  </table>

  <script>
    const CaseList = [
      {
        name: '输入年龄游戏',
        link: './001'
      },
      {
        name: 'js渲染页面',
        link: './002'
      },
      {
        name: '年会抽奖',
        link: './003/001.html'
      },
      {
        name: '随机显示图片',
        link: './003/002.html'
      },
      {
        name: '随机更换背景图',
        link: './003/003.html'
      },
      {
        name: '随机轮播',
        link: './003/004.html'
      },
      {
        name: '用户注册倒计时',
        link: './003/005.html'
      },
      {
        name: '定时轮播',
        link: './003/006.html'
      },
      {
        name: '关闭广告',
        link: './004/001.html'
      },
      {
        name: '随机点名',
        link: './004/002.html'
      },
      {
        name: '轮播图完整版',
        link: './004/003.html'
      },
      {
        name: '小米搜索框',
        link: './004/004.html'
      },
      {
        name: '评论字数统计',
        link: './004/005.html'
      },
      {
        name: '商品tab切换',
        link: './004/006.html'
      },
      {
        name: '单选全选商品',
        link: './005/001.html'
      },
      {
        name: '商品tab切换改造',
        link: './005/002.html'
      },
      {
        name: '仿京东固定头部',
        link: './005/003.html'
      },
      {
        name: '电梯导航',
        link: './005/navscroll/index.html'
      },
      {
        name: '格式化时间',
        link: './006/001.html'
      },
      {
        name: '下班倒计时',
        link: './006/002.html'
      },
      {
        name: '关闭广告',
        link: './006/003.html'
      },
      {
        name: '游乐园移动端',
        link: './006/FC/index.html'
      },
      {
        name: '学生信息管理',
        link: './006/student/index.html'
      },
      {
        name: '精品推荐',
        link: './006/TJ/index.html'
      },
      {
        name: '学生信息管理-缓存版',
        link: './006/004.html'
      },
      {
        name: '商品筛选',
        link: './007/001.html'
      },
      {
        name: '商品购物车',
        link: './007/002.html'
      },
      {
        name: '面向对象封装消息提示',
        link: './007/003.html'
      },
      {
        name: '节流练习',
        link: './007/004.html'
      },
      {
        name: '防抖练习',
        link: './007/005.html'
      },
      {
        name: '防抖节流综合练习',
        link: './007/006.html'
      },
      {
        name: '小米搜索框-关键字高亮',
        link: './007/007.html'
      },
      {
        name: '图书管理案例',
        link: './ajax/001.html'
      },
      {
        name: '发布新闻',
        link: './ajax/002.html'
      },
      {
        name: '新闻列表',
        link: './ajax/003.html'
      },
      {
        name: '淘宝搜索',
        link: './ajax/taobao/index.html'
      }
    ]

    const htmlStr = CaseList.map((item, index) => `
    <tr>
      <td>${ index + 1 }</td>
      <td>
        <a href="${ item.link }">${ item.name }</a>
      </td>
    </tr>
    `).join('')

    document.getElementById('tbody').innerHTML = htmlStr
  </script>
</body>
</html>